import { computed, reactive, ref, watch } from "vue";
import { PipePathPoint, PipePathType } from "/@/components/types";
import { buildShortUUID } from "/@/utils/uuid";

const DEFAULT_SIZE = 2;
const DEFAULT_LEN = 201;

export interface UsePipePathOptions {
  containerWidth: number;
  containerHeight: number;
  pipeLength?: number;
  centerX?: number;
  centerY?: number;
  scaleFactor: number;
}

export interface PipeComposeItem {
  strokeWidth: number;
  stroke: string;
}

function getPipeComposeData(size: number): PipeComposeItem[] {
  return [
    {
      strokeWidth: size,
      stroke: "#000000",
    },
    {
      strokeWidth: size * (60 / 64),
      stroke: "#7F7F7F",
    },
    {
      strokeWidth: size * (55 / 64),
      stroke: "#999999",
    },
    {
      strokeWidth: size * (41 / 64),
      stroke: "#B2B2B2",
    },
    {
      strokeWidth: size * (28 / 64),
      stroke: "#CCCCCC",
    },
    {
      strokeWidth: size * (18 / 64),
      stroke: "#E5E5E5",
    },
    {
      strokeWidth: size * (7 / 64),
      stroke: "#FFFFFF",
    },
  ];
}

export function usePipePath(options: UsePipePathOptions) {
  const { pipeLength, startX, startY } = getStartData(options);
  //路径的所有节点数组
  const points = reactive<PipePathPoint[]>([
    {
      x: startX,
      y: startY,
      _x: startX / options.scaleFactor,
      _y: startY / options.scaleFactor,
      id: buildShortUUID(),
    },
    {
      x: startX + pipeLength,
      y: startY,
      _x: (startX + pipeLength) / options.scaleFactor,
      _y: startY / options.scaleFactor,
      id: buildShortUUID(),
    },
  ]);
  const innerPipeSize = ref(2);
  const operSize = ref(10);
  const pipeSize = ref(6);
  const pipeComposeSize = ref(14);
  //Mx1 y1Lx2 y2Lx3 y3Lx4 y4Mx2 y2Lx5 y5
  const d = computed(() => {
    if (points.length <= 1) return "";
    let reuslt: string[] = [];
    let d = "";
    points.forEach((p) => {
      if (p.isParentNode) {
        d += "M" + reuslt.join("L");
        reuslt = [];
      }
      reuslt.push(`${p.x} ${p.y}`);
    });
    if (reuslt.length > 1) {
      d += "M" + reuslt.join("L");
    }
    return d;
  });
  function getStartData(options: UsePipePathOptions) {
    let pipeLength = options.pipeLength || DEFAULT_LEN;
    pipeLength = pipeLength * options.scaleFactor;
    const { centerX, centerY } = options;
    let startX, startY;
    if (!centerX || !centerY) {
      const centerPoint = {
        x: options.containerWidth / 2,
        y: options.containerHeight / 2,
      };
      startX = centerPoint.x - (pipeLength - 1) / 2;
      startY = centerPoint.y - (DEFAULT_SIZE - 1) / 2;
    } else {
      startX = centerX - (pipeLength - 1) / 2;
      startY = centerY - (DEFAULT_SIZE - 1) / 2;
    }
    return {
      pipeLength,
      startX,
      startY,
    };
  }
  function updateOptions(options: UsePipePathOptions) {
    const { pipeLength, startX, startY } = getStartData(options);
    points[0].x = startX;
    points[0].y = startY;
    points[1].x = startX + pipeLength;
    points[1].y = startY;
  }

  const pipeComposeData = ref(getPipeComposeData(pipeComposeSize.value));
  watch(pipeComposeSize, (v) => {
    pipeComposeData.value = getPipeComposeData(v);
  });

  return {
    innerPipeSize,
    operSize,
    pipeSize,
    d,
    points,
    updateOptions,
    outerOpacity: 1,
    pipeComposeSize,
    pipeComposeData,
  };
}
